<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            li {
                list-style: none;
            }
        </style>
    </head>
    <body>
        全选 <input type="checkbox" name="checkAll" /> <br />
        <button name="checkAllInstead">反选</button>
        <ul>
            <li><input type="checkbox" />打篮球</li>
            <li><input type="checkbox" />跳舞</li>
            <li><input type="checkbox" />排球</li>
            <li><input type="checkbox" />足球</li>
        </ul>
        <script>
            let checkAll = document.querySelector('[name="checkAll"]');
            let checkAllInstead = document.querySelector('[name="checkAllInstead"]');
            let checks = document.querySelectorAll('ul li input');
            checkAll.addEventListener('click', function () {
                let checked = checkAll.checked;
                for (let i = 0; i < checks.length; i++) {
                    checks[i].checked = checked;
                }
            });
            checks.forEach((item, index) => {
                item.addEventListener('click', function () {
                    let flag = true;
                    for (let i = 0; i < checks.length; i++) {
                        if (!checks[i].checked) {
                            flag = false;
                        }
                    }
                    checkAll.checked = flag;
                });
            });
            checkAllInstead.addEventListener('click', function () {
                checks.forEach((item, index) => {
                    item.checked = !item.checked;
                });
            });
        </script>
    </body>
</html>
